<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>扫码存彩票</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../css/common.css" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body,
			.mui-content {
				height: 100%;
			}
			
			body {
				background-color: #F9F9F9;
			}
			
			header {
				background-color: #fff;
			}
			
			.user_info {
				width: 100%;
				font-size: 20px;
				display: flex;
				justify-content: space-around;
			}
			
			.user_img {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				background: url("../image/head-min.jpg") no-repeat center center;
				background-size: 100% 100%;
				overflow: hidden;
				background-color: white;
				border: 1px solid rgba(0, 0, 0, 0.28);
				margin: 5px 0;
			}
			
			.user_name {
				font-size: 20px;
				font-weight: bold;
				margin: 15px auto 5px;
			}
			
			.ticket-num {
				border-bottom: 1px solid #ccc;
				border-top: 1px solid #ccc;
				height: 40px;
				line-height: 40px;
				text-indent: 10px;
				color: #959595;
				font-size: 15px;
			}
			/*section*/
			
			.section {
				text-align: center;
			}
			
			.hint {
				text-align: center;
			}
			
			.ready_num_div,
			.cloud_integral_div {
				width: 50%;
				float: left;
				text-align: center;
				padding: 16px 0 24px;
			}
			
			.ready_num,
			.cloud_integral {
				font-size: 26px;
				color: RGB(255, 104, 0);
				margin-top: 15px;
			}
			
			.integral_info_div {
				width: 90%;
				background-color: white;
				border: 1px #242424 dashed;
				margin: 24px auto 0;
				border-radius: 8px;
				text-align: center;
				font-size: 24px;
				overflow: hidden;
				padding: 6px 0;
			}
			
			.integral_info_div>p:first-child {
				color: RGB(255, 104, 0);
				font-size: 20px;
				margin: 8px auto 6px;
			}
			
			.integral_info_div>p:nth-of-type(2) {
				font-size: 20px;
				margin-top: 14px;
			}
			
			.integral_info {
				color: rgba(0, 0, 0, 0.48);
				padding-top: 20px;
				overflow: hidden;
			}
			
			.integral_info>p {
				width: 50%;
				float: left;
				text-align: center;
				font-size: 16px;
			}
			/*0*/
			
			footer {
				text-align: center;
			}
			
			footer .mui-btn-warning {
				background-color: #ff6600 !important;
				border: 1px solid #ff6600 !important;
			}
			
			footer .mui-btn-warning:active {
				background-color: #FF9800;
			}
			
			footer button {
				width: 40%;
				height: 40px;
				line-height: 40px;
				margin-top: 50px;
			}
			
			/**/
			
			.is-store {
				margin-top: 80px;
			}
			
			.store-success {
				text-align: center;
				font-size: 24px;
				color: red;
				margin-top: 40px;
			}
			/**/
			.repeat{
				text-align: center;
				margin-top: 30px;
			}
			.repeat p:nth-of-type(1){
				font-size: 16px;
				color: red;
			}
			.repeat p:nth-of-type(2){
				margin-top: 8px;
			}
		</style>
	</head>

	<body>
		<div id="app" class="mui-content">
			<header>
				<div class="header">
					<div class="user_info mui-row">
						<div class="user_img mui-col-sm-4 mui-col-xs-4">
							<img class="img" :src="info.userId?info.userHeader:'../images/head-min.jpg'" style="width: 100% " alt="">
						</div>
						<div class="mui-col-sm-8 mui-col-xs-8">
							<p class="user_name">{{info.userId?info.userName:info.cardUserName}}</p>
							<p class="user-id">{{info.userId?(200000000+info.userId*1):fixStr(info.phone)}}</p>
						</div>
					</div>
				</div>
			</header>
			<section>
				<div class="ticket-num">
					票号：{{info.serial}}
				</div>
				<div class="mui-clearfix" v-show="!isStore">
					<div class="ready_num_div">
						<p>读票数</p>
						<p class="ready_num">{{info.score}} <span style="font-size: 18px">张</span></p>
					</div>
					<div class="cloud_integral_div">
						<p>{{info.userId?'云':'卡'}}积分</p>
						<p class="cloud_integral">+{{info.score}}</p>
					</div>
				</div>
				<p class="hint" v-show="!isStore">存入后</p>
				<div class="integral_info_div" :class="{'is-store':isStore}">
					<p><span v-show="isStore">当前</span>总积分</p>
					<p class="total_integral">{{info.vipScore+info.cardScore}}</p>
					<div class="integral_info">
						<p>云积分:<span class="cloud_int">{{info.vipScore}}</span></p>
						<p>卡积分:<span class="card_int">{{info.cardScore}}</span></p>
					</div>
				</div>
			</section>
			<footer style="width: 100%">
				<div v-show="!info.isRepeat">
					<button v-show="!isStore" type="button" class="mui-btn mui-btn-warning" @click='storeScore'>存入积分</button>
					<p class="store-success" v-show="isStore">存票完成</p>
				</div>
				<div class="repeat" v-show="info.isRepeat">
					<p>该票已被使用</p>
					<p>使用时间：{{new Date(info.saveTime).format('yyyy-MM-dd hh:mm')}}</p>
				</div>
			</footer>
		</div>
		<script src="../config.js"></script>
		<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						isStore: false,
						info: {}
					}
				},
				created: function() {
					var vm = this
					mui.init()
					mui.plusReady(function() {
						vm.receiveParams()
					})
				},
				methods: {
					receiveParams: function() {
						var vm = this
						var self = plus.webview.currentWebview()
						vm.currentShopObj = self.currentShopObj
						vm.info = self.res
					},
					fixStr: function(str) {
						if(str && str * 1 !== 0) {
							var len = str.length
							var hidstr = ''
							for(var i = 0; i < len - 7; i++) {
								hidstr += '*'
							}
							return str.substr(0, 3) + hidstr + str.substr(len - 4)
						} else {
							return '--'
						}
					},
					storeScore: function() {
						var vm = this
						config.ajax({
							url: '/ticket/save.do',
							data:{
								userId:vm.info.userId,
								userNick: vm.info.userName,
								cardUserId: vm.info.cardUserId,
								cardUserName:vm.info.cardUserName,
								cardId: vm.info.cardId,
								cardNo: vm.info.cardNo,
								ticketOrder: vm.info.serial,
								lotteryCount: vm.info.score,
								storeId: vm.currentShopObj.storeId,
								storeName:vm.currentShopObj.storeName,
								merchantId: vm.currentShopObj.merchantId,
								devicesn: vm.info.devicesn
							},
							success:function(res) {
								if(res.result === 1) {
									vm.info.vipScore = res.vipScore
									vm.info.cardScore = res.cardScore
									mui.toast('添加成功')
									vm.isStore = true
								} else {
									mui.toast(res.errormsg)
								}
							}
						})
					}
				}
			})
		</script>
	</body>

</html>